<template>
        <view>
           <view class="title"> 我的标签 </view>
         <view class="list">
             <view :class=" e.choose ?'tag tag-choose center':'tag  center'" v-for=" (e,i) in list" @click="choose(i)">
                <u-icon name="plus"></u-icon> <view class="tag-text">{{ e.name }}</view>
             </view> 
			 
			 <view class="tag center" v-for=" e in 3" style="visibility: hidden;"></view> 
         </view>
		 <view class="btn center">
		 	确认添加
		 </view>
		</view>
		
    </template>
<script> 
 export default {
 		data() {
 			 return {
 				 list:[
					 { name:"历史",choose:false },
					 { name:"小说",choose:true },
					 { name:"穿越",choose:false },
					 { name:"相声陪书",choose:true },
					 { name:"人文资讯",choose:false },
				 ],
 			 }
 		},
 		mounted() {
 			// ajax 加载数据替换里面的tabs
 		},
		methods:{
			choose(i){
				this.list[i].choose = !this.list[i].choose 
			},
			submit(){
				
			},
			
		}
 }
</script>
<style >
	.app{
		height: 100vh;
	}
   .flex{display: flex; flex: 1;}
   .center{display: flex; justify-content: center; align-items: center;}
   .between{display: flex; justify-content: space-between; align-items: center;}
   .col{ display: flex; flex-direction: column;}
   .title{
	   font-size: 20px;
	   font-family: PingFang SC;
	   font-weight: 500;
	   color: #1A1A1A;
	   margin: 10px;
   }
   .tag{
	   background: #F5F5F5;
	   height: 30px;
	   margin: 5px;
	   width:114px;
	   padding: 5px 10px; 
	   border-radius: 30px;
   }
   .tag-choose{
	   background: linear-gradient(0deg, #F26122, #FE5D25);
	   color: #fff;
   }
   .tag-text{
	   margin-left: 3px;
   }
   .btn{
   	   background: #333333;
   	   height: 30px;
   	   margin: 10px;
   	   border-radius: 30px;
	   height: 67px;
	   background: linear-gradient(0deg, #F26122, #FE5D25);
	   border-radius: 57px;
	   color: #FFFFFF;
   }

  .list{
    display: flex;
	flex: 1;
	flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    height:calc(100vh - 220px);
    overflow-y: auto;
  }
</style>